<template>
  <el-menu
    :default-active="defaultActive"
    class="el-menu-vertical-demo"
    background-color="#fff"
    text-color="#2B2B2B"
    active-text-color="#02AD82"
    popper-effect="light"
  >
    <el-sub-menu
      v-for="(item, index) in menuData"
      :key="item.id"
      :index="item.id"
    >
      <template #title>
        <span class="treeLabel">{{ item.moduleName }}</span>
      </template>
      <el-menu-item
        v-for="(itemChild, i) in item.commonProblemList"
        :key="itemChild.id"
        :index="itemChild.id"
        @click="itemClick2(itemChild.id)"
      >
        <el-tooltip
          :content="itemChild.problemName"
          placement="top"
          v-if="itemChild.problemName.length > 8"
        >
          <span class="treeLabel">{{ itemChild.problemName }}</span>
        </el-tooltip>
        <span v-else class="treeLabel">{{ itemChild.problemName }}</span>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
const props = defineProps({
  menuData: Array as any,
  defaultActive: String
})
const emit = defineEmits(['itemClick2'])
const itemClick2 = (val: any) => {
  emit('itemClick2', val)
}
</script>
<style scoped lang="scss">
.el-menu-hover-bg-color {
  // background-color: var(--next-bg-menuBarActiveColor) !important;
  background-color: transparent !important;
}

.el-menu {
  border-right: none !important;
  width: 100%;
}

.el-menu-item.is-active {
  margin: 4px !important;
  border-radius: 4px !important;
  background: transparent !important;
}

.el-menu-item,
.el-sub-menu__title {
  // color: var(--next-bg-menuBarColor);
  // color:var(--el-color-primary) !important;
  color: #4d4d4d !important;
}

//水平菜单、横向菜单高亮 背景色，鼠标 hover 时，有子级菜单的背景色
.el-menu-item.is-active,
.el-sub-menu.is-active .el-sub-menu__title,
.el-sub-menu:not(.is-opened):hover .el-sub-menu__title {
  // @extend .el-menu-hover-bg-color;
  // background: black !important;
  color: var(--el-color-primary) !important;
}

.el-menu-item:hover {
  @extend .el-menu-hover-bg-color;
  // color:skyblue !important;
}

::v-deep .el-sub-menu.is-active.is-opened .el-sub-menu__title {
  /* // background-color: var(--el-color-primary) !important; */
  background: rgba(2, 173, 130, 0.1) !important;
  border-radius: 4px;
}

.treeLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

<style>
.el-menu-vertical-demo .el-menu-item {
  margin: 4px !important;
  width: 100%;
  height: 36px !important;
  line-height: 36px !important;
}
</style>
